<template>
  <div class="plan hideScrollBar">
    <van-nav-bar
      v-if="$route.query.hideH5Nav == 'false'"
      :title="t('plan.pageTitle')"
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
    />
    <div :class="{ top: $route.query.hideH5Nav == 'false' }">
      <img src="/image/mvp/plan/header-bg.png" alt="" />

      <div class="content">
        <div class="group">
          <div class="box">
            <p class="describe">
              {{ $t("plan.text1") }}
            </p>
          </div>
        </div>
        <div class="group">
          <p class="group-title">{{ $t("plan.text2") }}</p>
          <div class="box">
            <p class="describe">
              {{ $t("plan.text3") }}
            </p>
          </div>

          <p class="title">{{ $t("plan.text4") }}</p>
          <div class="box">
            <ol>
              <li class="tips">{{ $t("plan.text5") }}</li>
              <li class="tips">{{ $t("plan.text6") }}</li>
            </ol>
          </div>

          <p class="title">{{ $t("plan.text7") }}</p>
          <div class="box">
            <p class="tips">
              {{ $t("plan.text8") }}
            </p>
          </div>

          <p class="title">{{ $t("plan.text9") }}</p>
          <div class="box">
            <p class="tips">
              {{ $t("plan.text10") }}
            </p>
          </div>
        </div>
        <div class="group">
          <p class="group-title">{{ $t("plan.text11") }}</p>
          <ol>
            <li class="describe">{{ $t("plan.text12") }}</li>
            <li class="describe">{{ $t("plan.text13") }}</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const { t } = useI18n();
const $router = useRouter(); // 路由跳转
const onClickLeft = () => {
  $router.go(-1);
};
</script>
<style lang="scss" scoped>
.plan {
  background: #fff;
  height: 100vh;
  overflow-y: scroll;
  img {
    width: 100%;
  }
  .navStyle {
    margin-top: 94px !important;
  }
  .top {
    margin-top: 94px;
    position: relative;
  }
  .content {
    padding: 30px;
    position: relative;
    top: -35 * 2px;
    background: #fff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    .group {
      margin-bottom: 40px;
      ol {
        margin-left: 30px;
        list-style: normal !important;
      }
    }
  }
}
.group-title {
  color: var(--Brand-Blue, #007bff);
  font-size: 30px;
  font-weight: 590;
  line-height: 40px;
  margin-bottom: 10px;
}
.tips {
  color: var(--Gray, #797c83);
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  line-height: 36px;
}
.title {
  color: var(--Black-Blue, #141924);
  font-weight: 590;
  line-height: 40px;
  font-size: 30px;
  margin-bottom: 10px;
}
.describe {
  color: var(--Black-Blue, #141924);
  font-size: 26px;
  font-weight: 400;
  line-height: 36px;
  font-weight: 400;
}
.box {
  margin-bottom: 20px;
}
</style>
